<template>
  <a-form-model
    ref="ruleForm"
    :model="form"
    :rules="rules"
    layout="horizontal"
    class="AsteriskAfter newEditStyle rightDrawerWithoutCol"
  >
  <!-- ECU名称 -->
    <a-form-model-item :label="$t('ecuName')" prop="ecu">
      <a-select
        v-model="form.ecu"
        allow-clear
        showSearch
        :filter-option="false"
        :placeholder="$t('pleaseSelect') + $t('lingjian')"
        style="width: 100%"
        @search="getEcuList"
        :notFoundContent="isSearch ? $t('noData') : $t('ecuNameSearch')"
      >
        <a-select-option
          v-for="item in ecuList"
          :key="item.ecuModuleId"
          :value="`${item.name}/${item.ecuModuleId}`"
          :title="`${item.name}/${item.ecuModuleId}`"
        >
          {{ `${item.name}/${item.ecuModuleId}` }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <!-- 软件版本号 -->
    <a-form-model-item :label="$t('versionName')" prop="targetVersion">
      <a-input
        :maxLength="50"
        v-model.trim="form.targetVersion"
        :placeholder="$t('pleaseInput') + $t('versionName').toLowerCase()"
        allowClear
      />
    </a-form-model-item>
    <!-- 软件包上传 -->
    <a-form-model-item :label="$t('软件包上传')" prop="fileName">
      <a-input
        ref="userNameInput"
        readOnly
        :value="fileInfor.fileObject.fileName"
        :placeholder="$t('pleaseUpload')"
      >
        <a-icon
          @click="$refs.uploadPlug.upload()"
          slot="suffix"
          type="upload"
        />
      </a-input>
      <chunk-upload
        ref="uploadPlug"
        :showDom="false"
        fileStoreField="fileObject"
        :recordData="fileInfor"
        uploadType="8"
        :userPartUrl="false"
        :size="20*1024*1024*1024"
      >
      </chunk-upload>
    </a-form-model-item>
    <!-- 配置文件上传 -->
    <a-form-model-item :label="$t('配置文件上传')" prop="configFile">
      <a-input
        ref="userNameInput"
        readOnly
        :value="configFile.fileObject.fileName"
        :placeholder="$t('pleaseUpload')"
      >
        <a-icon
          @click="$refs.uploadConfigFile.upload()"
          slot="suffix"
          type="upload"
        />
      </a-input>
      <chunk-upload
        ref="uploadConfigFile"
        :limitFileName="'Config.xml'"
        :showDom="false"
        fileStoreField="fileObject"
        :recordData="configFile"
        uploadType="8"
        :userPartUrl="false"
        :size="20*1024*1024*1024"
      >
      </chunk-upload>
    </a-form-model-item>
    <a-form-model-item :label="$t('remark')" prop="remark">
      <a-textarea
        v-model="form.remark"
        :placeholder="$t('pleaseInput')"
        :rows="4"
        :maxLength="500"
      />
    </a-form-model-item>
  </a-form-model>
</template>
<script>
import ChunkUpload from '@/components/Upload/ChunkUpload'
import lodash from 'lodash'
import { checkVersionNameWithOutV } from '@/utils/validate'
export default {
  components: {
    ChunkUpload
  },
  props: {
  },
  data(){
    let fileTest = (rule, value, callback) => {
      if (this.fileInfor.fileObject.fileId) {
        callback();
      } else {
        callback(new Error(this.$t('pleaseUpload') + this.$t('file')));
      }
    };
    return {
      ecuOptionArr: [], // ecu过滤
      form:{
        ecuModuleId:undefined
      },
      // 软件包文件
      fileInfor: { fileObject: {} },
      configFile: { fileObject: {} },
      rules:{
        ecu: [{ required: true, message: this.$t('pleaseSelect') }],
        targetVersion: [{ required: true, message: this.$t('pleaseInput') },
        { validator: checkVersionNameWithOutV(), trigger: ['change', 'blur'], required: true }],
        fileName: [{ required: true, validator: fileTest, trigger: 'change'}],
        configFile: [{ required: true, validator: (rule, value, callback) => {
          if (this.configFile.fileObject.fileId) {
            callback();
          } else {
            callback(new Error(this.$t('pleaseUpload') + this.$t('file')));
          }
        }}]
      },
      ecuList:[],
      isSearch: false,
    }
  },
  watch:{
    'fileInfor.fileObject.fileId'(val){
      val && this.$refs.ruleForm.clearValidate('fileName')
    },
    'configFile.fileObject.fileId'(val){
      val && this.$refs.ruleForm.clearValidate('configFile')
    },
  },
  methods:{
    // 清空之前的搜索结果
    clearEcuList () {
      this.ecuOptionArr = []
      this.isSearch = false
    },
    getEcuList:lodash.debounce(function(value = '') {
      const vm = this
      vm.ecuList = []
      vm.isSearch = false
      if (value) {
        vm.$api
          .getAllEcu({ name: value.trim() })
          .then((res) => {
            if(res.data.length>0){
              vm.ecuList = res.data
            }else{
              vm.isSearch = true
            }
          })
      }
    },500),
    getFormData(){
      const vm = this
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate(valid => {
          if (!valid) {
            reject(valid)
            return
          }
          const data = {...this.form}
          data.ecuName=this.form.ecu.split('/')[0]
          data.ecuModuleId=this.form.ecu.split('/')[1]
          data.targetVersionFileId = vm.fileInfor.fileObject.fileId
          data.configFileId = vm.configFile.fileObject.fileId
          resolve(data)
        })
      })
    }
  }
}
</script>